<template>
  <div class="app-container">
    <!-- 搜索 -->
    <div class="filter-container tw-filter">
      <el-button class="filter-item tw-filter-button" type="danger" size="mini" icon="el-icon-delete" v-has="$store.state.user.btn_common+'del'" @click="handleDelete()">删除</el-button>
	  
	  <el-input v-model="queryList.fb_title" placeholder="标题" class="filter-item tw-filter-input" />
      <el-input v-model="queryList.member_id" placeholder="用户ID" class="filter-item tw-filter-input" />
	  <el-input v-model="queryList.member_name" placeholder="用户名" class="filter-item tw-filter-input" />
      <el-date-picker @change="changeData" value-format="yyyy-MM-dd" v-model="time_scope" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" class="filter-item tw-filter-input-mr"></el-date-picker>
      <el-button v-waves class="filter-item tw-filter-button" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- 列表 -->
    <el-table :key="tableKey" v-loading="listLoading" :data="tableList" border fit highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
	  <el-table-column label="用户ID" align="center">
	  	<template slot-scope="{row}">
	  		<span v-if="row.member_id == 0"></span>
	  	</template>
	  </el-table-column>
      <el-table-column label="用户名" prop="member_name" align="center" />
      <el-table-column label="时间范围" align="center">
        <template slot-scope="{row}">
          <span>{{ row.time_scope | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="danger" size="mini" v-has="$store.state.user.btn_common+'del'" @click="handleDelete(row.log_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="isPage && listTotal > 0" :total="listTotal" :page.sync="queryList.curpage" :limit.sync="queryList.page" @pagination="getList" />

  </div>
</template>
<script src="//unpkg.zhimg.com/element-ui@2.14.1/lib/index.js"></script>
<script>
import Pagination from '@/components/Pagination' // 基于el分页的二次封装
import waves from '@/directive/waves' // waves directive
export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      // 数据列表
      tableKey: 0,
      listTotal: 0,
      isPage: false,
      tableList: [],
      // 选择
      multipleSelection: [],
      // 搜索数据
      queryList: {
        page: this.$store.state.settings.page, // 每页显示数量
        curpage: 1, // 当前页码
        member_id: '', //用户ID
        member_name: '', //用户名
		time_scope:'', //时间范围 如：2020-10-1 - 2021-8-5
      },
      time_scope: ''
    }
  },
  // 创建时调用
  created() {
    this.getList()
  },
  methods: {
    // 获取数据列表
    getList() {
      this.listLoading = true
      fetchListExppoints(this.queryList).then(response => {
        this.tableList = response.list
        this.listTotal = response.list_count
        this.isPage = response.is_page
		console.log(this.tableList)
      })
      this.listLoading = false
    },

    // 删除
    handleDelete(id = 0) {
      let id_str = ''
      if (!id) {
        // 多选
        if (!this.multipleSelection.length) {
          this.$message({
            message: '请选择删除的条目！',
            type: 'warning'
          })
          return false
        }
        // 数据处理
        this.multipleSelection.forEach(item => {
          id_str += item.log_id + ','
        })
      } else {
        id_str = id
      }


      // 提交数据
      this.$confirm('确认删除数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({ id_str: id_str }).then(response => {
          // 重新获取列表
          this.getList()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },

    //选择搜索时间范围
    changeData(val){
      this.queryList.time_scope = val[0] + ' - ' + val[1];
    },
    // 搜索
    handleFilter() {
      this.queryList.curpage = 1
      this.tableList = []
      this.getList()
    },
    // 列表选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
  }
}
</script>
<style scoped>
@import url("//unpkg.zhimg.com/element-ui@2.14.1/lib/theme-chalk/index.css");
</style>
